<template>
  <div class="sousuo">
    <div class="sousuo1">
      <p>人员姓名:</p>
      <el-input v-model="search" size="large" placeholder="Type to search" />
    </div>
    <div class="sousuo2">
      <p>部门选择:</p>
      <el-input v-model="search1" size="large" placeholder="Type to search" />
    </div>
    <div class="add">
      <el-button type="primary" @click="dialogFormVisible = true"
        >新增</el-button
      >
      <el-dialog v-model="dialogFormVisible" title="员工新增">
        <el-form :model="form" label-width="120px">
          <el-row>
            <el-form-item label="员工姓名">
              <el-col>
                <el-input v-model="form.goodsName" />
              </el-col>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="form.goodsAge" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="性别">
              <el-select v-model="form.goodsSex" placeholder="请选择你的性别">
                <el-option label="男" value="0" />
                <el-option label="女" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="民族">
              <el-col>
                <el-select v-model="form.goodsNation" placeholder="请选择民族">
                  <el-option label="汉族" value="汉族" />
                  <el-option label="回族" value="回族" />
                  <el-option label="苗族" value="苗族" />
                  <el-option label="白族" value="白族" />
                </el-select>
                <!-- <el-input v-model="form.goodsNation" /> -->
              </el-col>
            </el-form-item>
          </el-row>
          <el-form-item label="入职时间">
            <el-col :span="11">
              <el-date-picker
                v-model="form.goodsDate"
                type="date"
                placeholder="Pick a date"
                style="width: 100%"
              />
            </el-col>
          </el-form-item>
          <el-form-item label="部门">
            <el-radio-group v-model="form.goodsPart">
              <el-radio label="销售部" />
              <el-radio label="运营部" />
              <el-radio label="保洁部" />
              <el-radio label="开发部" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="职位">
            <el-radio-group v-model="form.goodsPart1">
              <el-radio label="销售员" />
              <el-radio label="前台" />
              <el-radio label="研发员" />
              <el-radio label="清洁员" />
            </el-radio-group>
          </el-form-item>
          <el-row>
            <el-form-item label="期望薪资">
              <el-col>
                <el-input v-model="form.goodsMoney" />
              </el-col>
            </el-form-item>
          </el-row>
          <el-form-item label="员工描述">
            <el-input v-model="form.desc" type="textarea" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
  <el-table :data="peopleData" style="width: 100%" @cell-click="cellClick">
    <el-table-column fixed prop="goodsName" label="人员姓名" width="200" />
    <el-table-column prop="goodsSex" label="性别" width="200">
      <template #default="scope">
        <span>{{ booktypefilter(scope.row) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="goodsPart" label="部门" width="200" />
    <el-table-column prop="goodsPart1" label="职位" width="200" />
    <el-table-column prop="goodsMoney" label="薪资" width="200" />
    <el-table-column prop="goodsTime" label="上月工作时间" width="200" />
  </el-table>
  <div class="example-pagination-block">
    <el-pagination
      layout="prev, pager, next"
      :total="totals"
      :page-size="5"
      @current-change="handleCurrentChange"
      :current-page="current"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, watch, reactive } from "vue";
import { useRouter } from "vue-router";
import { indexApi, addApi } from "@/api/api";
import "@/mock/index";
import router from "@/router";
// 新增
const formLabelWidth = "140px";
const form = reactive({
  desc: "",
  goodsId: "",
  goodsSex: "",
  goodsName: "",
  goodsPart: "",
  goodsPart1: "",
  goodsMoney: "",
  goodsDate: "",
  goodsAge: "",
  goodsNation: "",
});
const onSubmit = async () => {
  const addList = await addApi({ data: "data", form });
  // 重新请求数据
  const list = await indexApi({ data: "data" });
  peopleData.value = list;
  tableData.value = list.data;
  peopleData.value = list.data.slice(0, 5);
  totals.value = list.data.length;
  dialogFormVisible.value = false;
};
const dialogFormVisible = ref<boolean>(false);
interface User {
  goodsId: number;
  goodsSex: number;
  goodsName: string;
  goodsPart: string;
  goodsPart1: string;
}
let disabled: any = false;
const search = ref<string>("");
const search1 = ref<string>("");
const booktypefilter = (type: any) => {
  return type.goodsSex == 0 ? "男" : "女";
};
// 人员信息
let peopleData = ref<User[]>([
  {
    goodsId: 1,
    goodsName: "萧秀兰",
    goodsSex: 1,
    goodsPart: "运营部",
    goodsPart1: "研发员",
  },
]);
let tableData = ref<User[]>([
  {
    goodsId: 1,
    goodsName: "萧秀兰",
    goodsSex: 1,
    goodsPart: "运营部",
    goodsPart1: "研发员",
  },
]);
let peopleData1 = ref<User[]>([
  {
    goodsId: 1,
    goodsName: "萧秀兰",
    goodsSex: 1,
    goodsPart: "运营部",
    goodsPart1: "研发员",
  },
]);
onMounted(async () => {
  const list = await indexApi({ data: "data" });
  peopleData.value = list;
  tableData.value = list.data;
  peopleData.value = list.data.slice(0, 5);
  totals.value = list.data.length;
});
// 人员搜索
watch([search, search1], async () => {
  if (search.value) {
    peopleData.value = tableData.value.filter((Name: User) => {
      return !search.value || Name.goodsName.includes(search.value);
    });
    pageSize.value = peopleData.value.length;
    totals.value = peopleData.value.length;
  }
  if (search1.value) {
    peopleData.value = tableData.value.filter((Name: User) => {
      return !search1.value || Name.goodsPart.includes(search1.value);
    });
    peopleData1.value = peopleData.value;
    totals.value = peopleData.value.length;
    if (peopleData1.value) {
      peopleData.value = peopleData1.value.slice(
        current.value * 5,
        current.value * 5 + 5
      );
    }
    console.log(totals.value);
  }
  // 搜索框清除，重新请求
  if (search.value === "" && search1.value === "") {
    const list = await indexApi({ data: "data" });
    peopleData.value = list;
    peopleData.value = list.data.slice(0, 5);
    totals.value = list.data.length;
  }
});
// 分页
let totals = ref<number>(50);
let current = ref<any>(0);
let pageSize = ref<number>(5);
const handleCurrentChange = async (number: number) => {
  current.value = number;
  if (!search1.value) {
    const list1 = await indexApi({ data: "data" });
    peopleData.value = list1.data.splice(current.value * 5, 5);
  } else {
    peopleData.value = peopleData1.value.slice(
      (current.value - 1) * 5,
      (current.value - 1) * 5 + 5
    );
  }
};
// 点击进入详情页
const cellClick = (row: any, column: any, cell: any, event: any) => {
  console.log(row);
  router.push("/home/wagesdetail/" + row.goodsId);
};
</script>
<style lang="less" scoped>
.sousuo {
  display: flex;
  margin-bottom: 20px;
  margin-top: 30px;
  margin-left: 30px;
  // justify-content: center;
  align-items: center;
  .sousuo1 {
    display: flex;
    p {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      width: 120px;
    }

    margin-right: 60px;
  }

  .sousuo2 {
    display: flex;

    p {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      width: 120px;
    }
  }
  .add {
    margin-left: 40px;
  }
}

.el-input__inner {
  margin-bottom: 20px;
}
</style>
